<template>
<div class="A-dex">
    <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="city">
          <div is-link @click="showPopup">
              成都
            <span><van-icon name="arrow-down" /></span>
            <p>上牌城市</p >
          </div>
    <van-popup
            v-model="show"
            closeable
            close-icon-position='top-left'
            position="bottom"
            :style="{ height: '50%' }">
      <van-area
        cancel-button-text=' '
        :area-list="areaList"
        :columns-num="2"/>
  </van-popup>
      </div>
  <van-search v-model="value" placeholder="搜索你要的车" class="value-firstA" shape="round"/>
    <a href="">
      <img src="https://sta.guazistatic.com/guazi-mall-second/img/follow_list_black.0b55b91.png" alt="" class="a-dex-d">
    </a>
  <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item
           @click.native="tep"
           v-model="value2"
          :options="option2"
      />
    <van-dropdown-item v-model="value3" :options="option3" />
    <van-dropdown-item v-model="value4" :options="option4" />
  </van-dropdown-menu>
  <div class="a-dex-e">
    <span @click="tep1">自营</span>
    <span @click="tep2">准新车</span>
    <span @click="tep3">秒杀</span>
    <span @click="tep4">包邮专区</span>
  </div>
</div>
</template>
<script>
// import { Image } from 'vant'
import { areaList } from '@vant/area-data'
export default {
  name: 'NavBar',
  methods: {
    // 点击，返回上一页
    onClickLeft() {
      this.$router.back() // 编程式的导航
    },
    tep() {
      if (this.value2 === 1) {
        this.$router.replace('/bmw')
      } else if (this.value2 === 2) {
        this.$router.replace('/dz')
      } else if (this.value2 === 3) {
        this.$router.replace('/bc')
      } else if (this.value2 === 4) {
        this.$router.replace('/aodi')
      } else if (this.value2 === 5) {
        this.$router.replace('/bt')
      }
    },
    tep1() {
      this.$router.replace('/yxhaoche')
    },
    tep2() {
      this.$router.replace('/newcat')
    },
    tep3() {
      this.$router.replace('/seconddied')
    },
    tep4() {
      this.$router.replace('/baoy')
    },
    showPopup() {
      this.show = true
    },
  },
  data() {
    return {
      areaList,
      value1: 0,
      value2: 1,
      value3: 0,
      value4: 0,
      option1: [
        { text: '智能排序', value: 0 },
        { text: '最新上架', value: 1 },
        { text: '价格最低', value: 2 },
        { text: '价格最高', value: 3 },
        { text: '车龄最短', value: 4 },
        { text: '里程最少', value: 5 },
      ],
      option2: [
        // { text: '其他', value: 0 },
        { text: '宝马', value: 1 },
        { text: '大众', value: 2 },
        { text: '奔驰', value: 3 },
        { text: '奥迪', value: 4 },
        { text: '本田', value: 5 },

      ],
      option3: [
        { text: '价格', value: 0 },
        { text: '5万以下', value: 1 },
        { text: '5万到10万', value: 2 },
        { text: '10万到15万', value: 3 },
        { text: '15万到20万', value: 4 },
        { text: '20万以上', value: 5 },

      ],
      option4: [
        { text: '筛选', value: 0 },
        { text: '最新上架', value: 1 },
        { text: '价格最低', value: 2 },
        { text: '价格最高', value: 3 },
        { text: '车龄最短', value: 4 },
        { text: '里程最少', value: 5 },
      ],
      value: '',
      show: false,
    }
  },
}
</script>
<style lang="scss" scoped>
::v-deep.van-dropdown-menu{
  border: #ffffff;
  box-shadow : 0 0 0 #ffffff;
}
.A-dex{
overflow: hidden;
}
  /* 样式穿透 */
.van-nav-bar{
  float: left;
}
 .van-nav-bar ::v-deep .van-icon {
    color: gray;
    font-size: 20px;
  }
  .V-dex{
    overflow: hidden;
  }
  ::v-deep.value-firstA{
    float: left;
    border-radius: 50%;
    // margin-left: .1rem;
    // flex: 1;
    width: 6rem;
  }
  ::v-deep.van-field__control{
    border-radius: 50%;
  }
  .A-dex-a{
    width: 1.3rem;
    margin-left: 1rem;
    float: left;
    text-align: center;
.a-dex-b{
  font-size: 14px;
  // margin: 0 auto;
  margin-top: 14px;
  margin-bottom: 0px;
  img{
    margin: 5px auto;
    width: 10px;
    height: 5px;
  }

}
.a-dex-c{
  font-size: 12px;
  margin: 0 auto;
  color: gray;
}
  }
  .a-dex-d{
width: 44px;
height: 44px;
margin-top: 30px;
margin-left: 5px;
  }
.van-dropdown-menu{
  // display: none;
  width: 100%;
  float: left;
}
::v-deep.van-dropdown-menu__bar{
  width: 100%;
  float: left;
}
.a-dex-e{
  background-color: white;
  width: 100%;
  // float: left;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
span{
      flex-basis: 25%;
    margin-right: 0.15rem;
    margin-left: 0.15rem;
    border-radius: 0.106667rem;
    padding: 0.213333rem 0.266667rem;
    margin-top: 15px;
    // font-family: PingFangSC-Medium,Roboto,sans-serif;
    font-size: 12px;
    color: #5f6670;
    // letter-spacing: 0;
    text-align: center;
    // line-height: .32rem;
    background: #f5f7fa;

}
span:hover{
      color: green;
      background-color: darkseagreen;
    }
}
.city{
  float: left;
      // width: 120px;
      // height: 88px;
      // padding-left: 24px;
      margin-left: 100px;
      margin-top: 10px;
      font-size: 14px;
      span{
            float: right;
            font-size: 14px;
           margin-top: 3px;
          }
      p{
        line-height: 16px;
            font-size: 12px;
            color: #5f6670;
            margin: 5px auto;
      }
    }
</style>
